.pagination-container {
    display: flex;
    gap: .5em
}

@media (max-width:1023.98px) {
    .pagination-container {
        gap: .25em
    }
}

.paginate-buttons {
    align-items: center;
    border-radius: 100%;
    display: flex;
  
    font-size: .875em;
    font-weight: 400;
    height: 3.125em;
    justify-content: center;
    letter-spacing: 0;
    line-height: 1.5714285714;
    transition: background-color .25s ease, color .25s ease;
    width: 3.125em
}

@media (max-width:767.98px) {
    .paginate-buttons {
      
        font-size: .875em;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.4285714286
    }
}

.paginate-buttons.active-page {
    background-color: #eee
}

.paginate-buttons.back-button,
.paginate-buttons.next-button {
    border: .125em solid #eee
}

.paginate-buttons.back-button:hover,
.paginate-buttons.next-button:hover {
    background-color: #eee
}

@media (max-width:1023.98px) {
    .paginate-buttons {
        height: 2.3125em;
        width: 2.3125em
    }
}

.ui-pagination {
    align-items: center;
    display: flex;
    justify-content: center
}

.ui-pagination__icon {
    color: #000724;
    height: .9375em;
    transition: color .3s ease;
    width: .75em
}

.ui-pagination__icon--next {
    transform: rotate(180deg)
}

.ui-pagination__icon:hover {
    color: var(--icon-color-hover)
}